<template>
  <view class="pages" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
    <c-nav-bar title="出行规划"></c-nav-bar>
	<view class="top" :style="{'background':'url('+topBgImg+')','background-size':'cover'}" @tap="turnLinkUri">
      <view class="mainContent">
        <view class="route">
          <view class="mainC_1">
            <span class="lxxz">路线选择</span>
            <span>
              <u-radio-group @change="changeRadio" size="32" v-model="dataList.trafficType" placement="row"
                activeColor="#01B9F9">
                <u-radio labelSize="30" label="公共交通" :name="1"></u-radio>
                <u-radio labelSize="30" label="自驾出行" :name="2"></u-radio>
              </u-radio-group>
            </span>
          </view>
          <view class="mainC_2">
            <span class="input" @click="changeBegin">
              <span v-if="!dataList.startSpot.name" style="color: #cccccc">请选择出发地</span>
              <span v-else>{{ dataList.startSpot.name }}</span>
              <!-- <u--input border="none" placeholder="请选择起点" v-model="dataList.startSpot.name"></u--input> -->
            </span>
            <span class="icon"></span>
            <span class="input" @click="changeArrive" style="text-align: right">
              <span v-if="!dataList.endSpot.name" style="color: #cccccc">请选择目的地</span>
              <span v-else>{{ dataList.endSpot.name }}</span>
              <!-- <u--input inputAlign='right' border="none" placeholder="" v-model="dataList.endSpot.name"
									@focus="changeArrive"></u--input> -->
						</span>
					</view>
					<view class="mainC_3">
						<span :class="[cityIndex == index ? 'city_selected' : 'city']" v-for="(item, index) in hotCity1"
							:key="index" @click="chooseHotCity(item, index)">
							{{ item.name }}
						</span>
					</view>
					<view class="mainC_4" @tap="() => {
            this.timeShow = true;
          }
            ">
            <span v-if="time" style="margin-left: 20rpx">
              {{ time }}
            </span>
            <span v-else class="span1"> 请选择日期 </span>
          </view>
          <view class="mainC_5" @click="submit()">
            <span class="btn"> </span>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom" v-if="currentTab == 1">
      <!-- 上岛路线下方热门景点、酒店民宿、餐饮美食 -->
      <view class="pic" v-if="currentTab == 1">
        <view class="tabbar">
          <image class="tabar1" src="https://i.ringzle.com/file/20240111/1a9b156eb11e46598c5eed20e0d93246.png"
            v-if="currentIndex == 1"></image>
          <image style="height: 25px" src="https://i.ringzle.com/file/20240113/a8f7a15bb0a64136958d8185e05d3eba.png"
            class="tabar1" @click="clickTab(1)" v-else></image>

					<image class="tabar1" src="https://i.ringzle.com/file/20240111/1a974b9f72574570bc24e20ffe0ce681.png"
						v-if="currentIndex == 2"></image>
					<image style="height: 25px" class="tabar1"
						src="https://i.ringzle.com/file/20240113/d1f3f9b0909f4595bed6ffb0ce5b0d6e.png"
						@click="clickTab(2)" v-else>
					</image>
					<image class="tabar1" src="https://i.ringzle.com/file/20240111/c881d86123584544aad5ec9d39ea028e.png"
						v-if="currentIndex == 3"></image>
					<image style="height: 25px" class="tabar1"
						src="https://i.ringzle.com/file/20240113/403edec3d02d4341936916906d926997.png"
						@click="clickTab(3)" v-else>
					</image>
				</view>
				<!-- 热门景点 -->
				<view class="showPic" v-if="currentIndex == 1">
					<view class="cl_card" v-for="(item, index) in spotList" :key="index" @tap="toDetails(item, 3)">
						<image :src="item.coverImage"></image>
						<view class="clc_info">
							<view class="clci_name">{{ item.scenicSpotName }}</view>
						</view>
						<view class="clc_type">热门</view>
					</view>
				</view>
				<!-- 酒店民宿 -->
				<view class="showPic" v-else-if="currentIndex == 2">
					<view class="cl_card" v-for="(item, index) in stayList" :key="index" @tap="toDetails(item, 2)">
						<image :src="item.cover"></image>
						<view class="clc_info">
							<view class="clci_name">{{ item.name }}</view>
						</view>
						<view class="clc_type">热门</view>
					</view>
				</view>
				<!-- 餐饮美食 -->
				<view class="showPic" v-else-if="currentIndex == 3">
					<view class="cl_card" v-for="(item, index) in foodList" :key="index" @tap="toDetails(item, 1)">
						<image :src="item.storeFrontPic"></image>
						<view class="clc_info">
							<view class="clci_name">{{ item.name }}</view>
						</view>
						<view class="clc_type">热门</view>
					</view>
				</view>
			</view>
		</view>
		<view class="question" v-if="currentTab == 2">
			<view class="title"> 猜你想问 </view>
			<u-collapse :border="false" accordion @change="change" @close="close" @open="open">
				<u-collapse-item :title="item[0].questionName" name="Docs guide" v-for="(item, index) in questionList"
					:key="index">
					<text class="u-collapse-content">{{ item[0].name }}</text>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="popUp v-calendan">
			<!-- 出发地弹窗 -->
			<u-popup :show="beginShow" @close="beginShowClose" closeOnClickOverlay :closeable="true" round="16"
				mode="bottom">
				<view class="popupTitle">
					<text>请选择出发地</text>
				</view>
				<view class="tabs">
					<u-tabs :list="beginList" @click="chooseCityOrPort" :activeStyle="{
            color: '#2C2C2C',
            fontSize: '32rpx',
            fontWeight: 'bold',
          }" :inactiveStyle="{
            color: '#2C2C2C',
            fontSize: '32rpx',
            fontWeight: '400',
          }"></u-tabs>
				</view>

				<view class="city" v-if="!cityPortFlag">
					<view class="cityChoosed">
						<span style="color: #01b9f9; margin-right: 30rpx" @click="() => {
              provinceFlag = true;
              province = '';
            }
              ">{{ province }}</span>
						<span style="color: #01b9f9; margin-right: 30rpx">{{ city }}</span>
						<!-- <span v-if="province||city">请选择</span> -->
					</view>
					<scroll-view v-if="provinceFlag" :scroll-into-view="scrollTop" :scroll-y="true"
						style="height: 100%">
						<span style="color: #a7a7a7; margin: 14px 16px; font-size: 28rpx">热门城市</span>
						<view class="hotCity">
							<span :class="[cityIndex == index ? 'hotCity_selected' : '']"
								v-for="(item, index) in hotCity" :key="index" @click="chooseHotCity(item, index)">
								{{ item.name }}
							</span>
						</view>
						<view class="indexList">
							<view class="citysIndex">
								<view class="citysList">
									<view class="citysTitle">
										<label>所有城市</label>
									</view>
									<view class="citysIndexList">
										<view class="van-index-bar">
											<view v-for="(v, i) in groups" :key="i">
												<view class="listIndexTitle" :id="v[0].initial">
													<label>{{ v[0].initial }}</label>
												</view>
												<view @click="tapPrvince(q)" class="listIndexText" v-for="q in v"
													:key="q.id">
													<label :class="[q.checked ? 'cityChecked' : '']">{{
                            q.name
                          }}</label>
												</view>
											</view>
											<!-- 右边字母坐标 -->
											<view class="index-sidebar">
												<view v-for="(v, i) in indexList" :key="i">
													<view :class="[
                            scrollTop == v ? 'index-bar:active' : 'index-bar',
                          ]" @click="findCity(v)">{{ v }}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 二级城市菜单 -->
					<scroll-view v-else :scroll-into-view="scrollTop" :scroll-y="true" style="height: 100%">
						<view class="indexList">
							<view class="citysIndex">
								<view class="citysList">
									<view class="citysTitle">
										<label>所有城市</label>
									</view>
									<view class="citysIndexList">
										<view class="van-index-bar">
											<view v-for="(v, i) in cityList" :key="i">
												<view class="listIndexTitle" :id="v[0].initial">
													<label>{{ v[0].initial }}</label>
												</view>
												<view @click="tapCity(q)" class="listIndexText" v-for="q in v"
													:key="q.id">
													<label :class="[q.checked ? 'cityChecked' : '']">{{
                            q.name
                          }}</label>
												</view>
											</view>
											<!-- 右边字母坐标 -->
											<view class="index-sidebar">
												<view v-for="(v, i) in indexList" :key="i">
													<view :class="[
                            scrollTop == v ? 'index-bar:active' : 'index-bar',
                          ]" @click="findCity(v)">{{ v }}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="port" v-else>
					<view class="mainContent">
						<span @click="chooseStartPort(index)" v-for="(item, index) in startPortList" :key="index"
							:class="startPortIndex == index ? 'portStyle_selected' : 'portStyle'
              ">{{ item.name }}</span>
					</view>
				</view>
			</u-popup>
			<!-- 目的地弹窗 -->
			<u-popup round="16" mode="bottom" @close="arriveShowClose" :show="arriveShow" closeOnClickOverlay="true"
				closeable>
				<view class="popupTitle">
					<text>请选择目的地</text>
				</view>
				<view class="mainContent">
					<span @click="chooseEndPort(index)" v-for="(item, index) in endPortList" :key="index"
						:class="endPortIndex == index ? 'portStyle_selected' : 'portStyle'">{{ item.name }}</span>
				</view>
			</u-popup>
			<u-calendar @close="timeClose()" closeOnClickOverlay round="16" rowHeight="65" :show="timeShow"
				@confirm="timeConfirm" :maxDate="maxDate" ref="calendar"></u-calendar>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="cityConfirm" @cancel="cityCancel" :visible="visible" />
		</view>
	</view>
</template>

<script>
	var maxQueryDayNum = '';
	import cityPicker from "@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker";
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				city: "",
				groups: [],
				hotCitys: [],
				provinceList: [],
				indexList: [],
				cityData: {},
				province: "",
				scrollTop: "",
				indexList: [
					"A",
					"B",
					"C",
					"D",
					"E",
					"F",
					"G",
					"H",
					"I",
					"J",
					"k",
					"L",
					"M",
					"N",
					"O",
					"P",
					"Q",
					"R",
					"S",
					"T",
					"U",
					"V",
					"W",
					"X",
					"Y",
					"Z",
				],

      cityIndex: null,
      hotCity1: [],
      startPortIndex: null,
      startPortList: [],
      hotCity: [],
      cityPortFlag: 0,
      beginShow: false,
      maskCloseAble: true,
      defaultValue: "330922",
      column: 2,
      timeShow: false,
      endPortIndex: null,
      beginList: [
        {
          name: "城市",
        },
        {
          name: "码头",
        },
      ],
      currentTab: 2,
      topTabBar: ["上岛路线", "游玩定制"],
      value: "1",
      begin: "",
      arrive: "",
      cityMemo: ["上海", "杭州", "宁波"],
      date: "12月06日",
      tabbar: ["热门景点", "酒店民宿", "餐饮美食"],
      currentIndex: 1,
      page: 1,
      limit: 10,
      list: [],
      leftList: [],
      rightList: [],
      fromData: {
        limit: 10,
        page: 1,
        sort: 1,
        scenicName: "",
      },
      arriveShow: false,
      endPortList: [],
      dataList: {
        queryDate: "",
        trafficType: 1,
        startSpot: {
          id: null,
          type: 2,
          name: "",
        },
        endSpot: {
          id: null,
          type: 1,
          name: "",
        },
      },
      time: "",
      spotList: [],
      stayList: [],
      foodList: [],
      HomestayFormData: {
        arriveDate: "",
        leaveDate: "",
        limit: 10,
        page: 1,
      },
      foodFromData: {
        limit: 10,
        page: 1,
      },
      visible: false,
      cityList: [],
      questionList: [],
      provinceFlag: true,
      maxDate: '',
	  topBgImg:'https://fsy.shengsi.gov.cn/file/20240717/5c60e44dca414a02b918cb3eff3a7007.png',
	  linkUri:''
    };
  },
  components: {
    cityPicker,
  },
  onLoad() {
    this.getLbList();
    this.getMaxDate();
    this.getScenicSpotList();
    this.selectAllSpot();
    this.getHomestayPage();
    this.getFoodList();
    this.getQuestion();
  },
  onReady() {
    this.$refs.calendar.setFormatter(this.formatter);
  },
  methods: {
	getLbList() {
		this.$api.get('/sys/isappletpic/queryBannerByType/25').then(res => {
			if (res.data.code === 0) {
				let list = res.data.data.bannerList.map(b=>b.path);
				if(list.length>0){
					 this.topBgImg = list[0];
					 this.linkUri = res.data.data.bannerList[0].linkUri;
				}
			}
		})
	},
	turnLinkUri(){
		if(this.linkUri) uni.navigateTo({url:this.linkUri})
	},
    getMaxDate() {
      this.$api.get("/travel/isshipsaleconfig/page").then((res) => {
        if (res.data.code === 0) {
          if (res.data.data.list.length > 0) {
            maxQueryDayNum = (+res.data.data.list[0].wysts || 0);
            this.maxDate = new Date(new Date().setDate(new Date().getDate() + maxQueryDayNum)).Format('yyyy-MM-dd');
          }
        } else this.$showModal(res.data.msg);
      });
    },
    formatter(day) {
      if (maxQueryDayNum) {
        for (let i = 0; i <= maxQueryDayNum; i++) {
          let now = new Date(
            new Date().getFullYear() + "-" + day.month + "-" + day.day
          ).Format("yyyy-MM-dd");
          let temp = new Date(
            new Date().setDate(new Date().getDate() + i)
          ).Format("yyyy-MM-dd");
          if (now == temp) {
            day.bottomInfo = "可售";
          }
        }
        return day;
      }
    },
    getQuestion() {
      this.$api.get("/api/onlineservice/list").then((res) => {
        this.questionList = res.data.data;
      });
    },
    tapPrvince(province) {
      this.province = province.name;
      const groups = {};
      for (const item of province.cityList) {
        const initial = item.initial;
        if (!groups[initial]) {
          groups[initial] = [];
        }
        groups[initial].push(item);
      }
      this.cityList = groups;
      this.provinceFlag = false;
    },
    tapCity(city) {
      this.city = city.name;
      this.dataList.startSpot = city;
      this.beginShowClose();
    },

			findCity(v) {
				this.scrollTop = v;
			},

			beginShowClose() {
				this.beginShow = false;
				// this.visible = visible
			},
			// 出发地弹窗tabs切换
			chooseCityOrPort(e) {
				this.cityPortFlag = e.index;
			},
			// 打开出发地弹窗
			changeBegin() {
				this.beginShow = true;
				// this.visible = true
				this.provinceFlag = true;
				this.province = "";
				this.city = "";
			},
			cityCancel() {
				this.visible = false;
			},
			cityConfirm(val) {
				this.dataList.startSpot.id = val.code;
				this.dataList.startSpot.name = val.cityName;
				this.visible = false;
			},
			// onShareAppMessage(res) {
			// 	if (res.from === 'button') { // 来自页面内分享按钮
			// 		console.log(res.target, '1')
			// 	}
			// 	return {
			// 		title: 'data-cityPicker省市区地址选择器！',
			// 		path: '/pages/cityPicker/cityPicker'
			// 	}
			// },
			// onShareTimeline(res) {
			// 	if (res.from === 'button') { // 来自页面内分享按钮
			// 		console.log(res.target, '2')
			// 	}
			// 	return {
			// 		title: 'data-cityPicker省市区地址选择器！'
			// 	}
			// },

			getFoodList() {
				this.$api
					.get("/api/merchant/food/page", {
						limit: 10,
						page: 1,
						foodType: "", //（餐饮类型: 字典
						intellectSort: "", //（智能排序：1默认排序 2好评优先 3距离优先 4高价优先 5低价优先
						islandId: "", //（所属岛屿id
						merchantCategory: 4, //（商户分类: 字典MerchantCategory
						name: "", //（商户名称
						status: 1,
					})
					.then((res) => {
						this.foodList = res.data.data.list;
						this.foodList.forEach((f) => {
							if (f.storeFrontPic) {
								f.storeFrontPic = f.storeFrontPic.split(",")[0];
							}
						});
					});
			},
			formatDate(date) {
				var year = date.getFullYear();
				var month = String(date.getMonth() + 1).padStart(2, "0");
				var day = String(date.getDate()).padStart(2, "0");
				return year + "-" + month + "-" + day;
			},
			// 酒店民宿列表页
			getHomestayPage() {
				var today = new Date();
				var tomorrow = new Date();
				this.HomestayFormData.arriveDate = this.formatDate(today);
				tomorrow.setDate(tomorrow.getDate() + 1);
				this.HomestayFormData.leaveDate = this.formatDate(tomorrow);
				this.$api
					.get("/api/hotel/getHomestayPage", this.HomestayFormData)
					.then((res) => {
						if (res.data.code === 0) {
							this.stayList = res.data.data.list;
						} else this.$showModal(res.data.msg);
					});
			},
			changeArrive() {
				this.arriveShow = true;
			},

			changeRadio(e) {
				console.log(e, "eeeeee");
			},
			// 查询出发地和目的地
			selectAllSpot() {
				this.$api.post("/api/tripspot/selectAllSpot").then((res) => {
					if (res.data.code == 0) {
						this.startPortList = res.data.data.startPortList;
						this.provinceList = res.data.data.provinceList;
						this.endPortList = res.data.data.endPortList;
						this.hotCity = res.data.data.hotCity;
						this.hotCity1 = res.data.data.hotCity.slice(0, 5);
						let mt = new Date(
							new Date().setDate(new Date().getDate() + 1)
						).Format("yyyy-MM-dd")
						const currentDate = new Date();
						const year = currentDate.getFullYear();
						const month = String(currentDate.getMonth() + 1).padStart(2, "0");
						// const day = String(currentDate.getDate()).padStart(2, '0');
						const day = String(currentDate.getDate() + 1).padStart(2, "0"); //默认查询日期为明天
						// const formattedDate = `${year}-${month}-${day}`;
						const formattedDate = mt;
						this.dataList.queryDate = formattedDate;
						let yr = new Date(
							new Date().setDate(new Date().getDate() + 1)
						).Format("MM-dd");
						this.time = yr + " " + this.getDayOfWeek(this.dataList.queryDate);
						
						const groups = {};
						for (const item of this.provinceList) {
							const initial = item.initial;
							if (!groups[initial]) {
								groups[initial] = [];
							}
							groups[initial].push(item);
						}
						this.groups = groups;
					}
				});
			},
			change(e) {
				console.log("change", e);
			},
			clickTab(index) {
				this.currentIndex = index;
			},
			getScenicSpotList() {
				this.$api.get("/api/scenic/page", this.fromData).then((res) => {
					if (res.data.code == 0) {
						this.spotList = this.spotList.concat(res.data.data.list);
					}
				});
			},
			// 跳转详情
			toDetails(item, type) {
				if (type == 1) {
					// 去美食详情
					uni.navigateTo({
						url: "/pagesTrip/fineFood/details/details?list=" +
							JSON.stringify({
								...item,
							}),
					});
				} else if (type == 2) {
					// 去酒店详情
					uni.navigateTo({
						url: "/pagesTrip/hotel/details/index?list=" +
							JSON.stringify([{
								homestayId: item.id,
								name: item.name,
								...this.HomestayFormData,
							}, ]),
					});
				} else if (type == 3) {
					//去景点详情
					uni.removeStorageSync("spid_old");
					uni.removeStorageSync("price_old");
					uni.navigateTo({
						url: "/pagesTrip/scenicSpots/spotDetail?spid=" +
							item.ismapId +
							"&price=" +
							item.startPrice +
							"&isBuy=" +
							item.isBuy,
					});

					// uni.removeStorageSync('spid_old');
					// uni.removeStorageSync('price_old');
					// uni.navigateTo({
					// 	url: "/pagesTrip/scenicSpots/spotDetail?spid=" + item.id + '&price=' + item.price +
					// 		'&isBuy=' + item.isBuy
					// })
				}
			},
			changeTopTab(index) {
				this.currentTab = index;
			},
			open() {},
			close() {},
			change() {},
			toHref(url) {
				uni.navigateTo({
					url: url,
				});
			},
			// 选择目的地港口
			chooseEndPort(index) {
				this.endPortIndex = index;
				this.dataList.endSpot = this.endPortList[index];
				this.arriveShowClose();
			},
			arriveShowClose() {
				this.arriveShow = false;
			},
			// 选择出发地港口
			chooseStartPort(index) {
				this.startPortIndex = index;
				this.dataList.startSpot = this.startPortList[index];
				this.beginShowClose();
				// console.log('这里', 11111);
				this.cityIndex = null
			},
			// 选择热门城市
			chooseHotCity(item, index) {
				this.dataList.startSpot = item;
				this.beginShowClose();
				this.cityIndex = index;
			},
			// 日历确定时间
			timeConfirm(e) {
				this.timeShow = false;
				this.dataList.queryDate = e[0];
				this.time =
					this.dataList.queryDate.slice(-5) + " " + this.getDayOfWeek(e[0]);
			},
			// 关闭日历
			timeClose() {
				this.timeShow = false;
			},
			// 根据日期获取当前是周几
			getDayOfWeek(dateString) {
				var date = new Date(dateString);
				var weekdays = [
					"星期日",
					"星期一",
					"星期二",
					"星期三",
					"星期四",
					"星期五",
					"星期六",
				];
				var dayOfWeek = date.getDay();
				var dayOfWeekText = weekdays[dayOfWeek];
				return dayOfWeekText;
			},
			submit() {
				// 存储数据
				uni.setStorageSync("timeDate", {
					timeDate: this.time,
				});

				if (!this.dataList.queryDate) {
					uni.showToast({
						title: "请选择日期",
						icon: "none",
					});
					return;
				}
				if (!this.dataList.startSpot.name) {
					uni.showToast({
						title: "请选择起点",
						icon: "none",
					});
					return;
				}
				if (!this.dataList.endSpot.name) {
					uni.showToast({
						title: "请选择目的地",
						icon: "none",
					});
					return;
				}
				if (!this.dataList.trafficType) {
					uni.showToast({
						title: "请选择公共交通/自驾出行",
						icon: "none",
					});
					return;
				}
				// console.log('this.time', this.time)
				// if (this.dataList.trafficType == 2) {

				// 	if (this.dataList.startSpot.lat >= 30.287500) {
				// 		uni.navigateTo({
				// 			url: '/pagesTaxi/travelPlanning1/driveBySelf?startSpot=' + this.dataList.startSpot
				// 				.name +
				// 				'&endSpot=' + this.dataList.endSpot.name + '&myday=' + this.time
				// 		})
				// 	} else {
				// 		uni.navigateTo({
				// 			url: '/pagesTaxi/travelPlanning1/driveBySelf?startSpot=' + this.dataList.startSpot
				// 				.name +
				// 				'&endSpot=' + this.dataList.endSpot.name + '&myday=' + this.time
				// 		})
				// 	}

				// 	return
				// }

				this.$api
					.post("/api/tripspot/autoGenTripPlanNew", this.dataList)
					.then((res) => {
						if (res.data.code == 0 && res.data.data.length) {
							uni.navigateTo({
								url: "/pagesTaxi/travelPlanning1/NewRouteProgramme?list=" +
									JSON.stringify(res.data.data) +
									"&dataList=" +
									JSON.stringify(this.dataList),
							});
						} else {
							uni.showToast({
								title: "暂无数据！",
								icon: "none",
							});
							return;
						}
					});
			},
		},
	};
</script>
<style>
	.citysIndex {
		width: 100%;
		height: 100%;
		/* height: calc(100% - 50px); */
	}

	.citysHead {
		padding: 0 36rpx;
	}

	.citysTitle {
		margin-top: 34rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.citysTitle label:nth-child(2) {
		display: inline-block;
		font-weight: 500;
		margin-left: 40rpx;
	}

	/* 热门城市 */
	.citysHot {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;
	}

	.citysHot-list {
		margin-top: 20rpx;
	}

	.citysHot-list view {
		display: inline-block;
	}

	.citysHot-list label {
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		width: 28%;
		height: 60rpx;
		border: 2rpx solid #eee;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.citysHot-list view:nth-child(3n + 3) {
		margin-right: 0;
	}

	/* 所有城市 */
	.citysList {
		padding: 0 36rpx;
	}

	.citysIndexList {
		position: relative;
	}

	.index-sidebar {
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 36rpx;
		text-align: center;
		top: 38%;
		-webkit-user-select: none;
		user-select: none;
		color: #a0a0a0;
	}

	.index-bar {
		width: 20px;
		border-radius: 50%;
		text-align: center;
		font-size: 18rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #88919d;
		line-height: 32rpx;
	}

	.index-bar:active {
		background: #1474ed;

		font-size: 13px;
		color: #bdbdbd;
		margin-bottom: 5px;
		width: 20px;
		height: 10px;
		border-radius: 70%;
		line-height: 10px;
		text-align: center;
	}

	.listIndexTitle {
		width: 100%;
		background: #f5f8fa;

		color: #c3c3c3;
		font-size: 13px;
	}

	.listIndexText {
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #efefef;
	}

	.listIndexText label {
		display: block;
		width: 100%;
		height: 100%;
		font-size: 26rpx;
		font-weight: bold;
	}

	.cityChecked {
		color: #1474ed;
	}
</style>

<style lang="scss">
.pupop-btn {
  height: 0 !important;
}

// ::v-deep .v-calendar .uicon-close{
// 	font-size: 28rpx !important;
// 	}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

::v-deep .u-radio {
  margin-right: 60rpx;
}

::v-deep .u-radio__text {}

/deep/.top .u-icon__icon {
  font-size: 36rpx !important;
}

/deep/.uicon-close {
  font-size: 14px;
}

/deep/.u-tabs__wrapper__nav__line {
  width: 20px !important;

  transition-duration: 300ms;
  height: 3px !important;
  background: #007a69;
  background-size: cover;
}

/deep/.u-tabs__wrapper__nav__item {
  padding: 0 23px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pages {
  // background: #F5F8FA;
  background-color: #d7e4f7;
  padding-bottom: 40rpx;
  box-sizing: border-box;

  .popUp {
    .port {
      height: 835rpx;
      padding: 20rpx 0;
    }

    .city {
      padding: 20rpx 0;
      height: 835rpx;

      .hotCity_selected {
        color: #01b9f9;
      }

      .cityChoosed {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 13rpx 35rpx;
      }

      .hotCity {
        padding: 18px 30rpx;

        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-gap: 10px;

        span {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #2c2c2c;
        }
      }
    }

    .tabs {
      border-bottom: 1rpx solid #efefef;
    }

    .popupTitle {
      font-size: 32rpx;
      font-weight: 700;

      padding: 27rpx;

      text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 34rpx;
        color: #2c2c2c;
        line-height: 40rpx;
      }
    }

    .mainContent {
      margin-top: 43rpx;
      margin-bottom: 100rpx;
      display: grid;
      grid-template-columns: 31% 31% 31%;
      gap: 10px;
      padding: 0 20rpx;
      box-sizing: border-box;

      .portStyle {
        height: 72rpx;
        border: 1rpx solid #efefef;
        margin-bottom: 20rpx;
        text-align: center;
        line-height: 72rpx;
        border-radius: 16rpx;
      }

      .portStyle_selected {
        height: 72rpx;
        font-weight: bold;
        color: #01b9f9;
        margin-bottom: 20rpx;
        text-align: center;
        line-height: 72rpx;
        border-radius: 16rpx;
        background: url("https://i.ringzle.com/file/20240112/eebcd206125747d797ab8ca979fe610d.png");
        background-repeat: no-repeat;
        /* 防止背景图片重复 */
        background-size: 100% 100%;
      }
    }
  }

  .top {
    background-repeat: no-repeat;
    position: relative;
    padding: 1rpx 24rpx;

    .mainContent {
      background: #fff;
      border-radius: 16rpx;
      margin-top: 280rpx;

      .custom {
        padding: 20rpx 30rpx;
        background: #fff;

        .title {
          font-size: 32rpx;
          font-weight: 700;
        }

        .custom1 {
          padding: 42rpx 20rpx;
          margin: 28rpx 0;
          border-radius: 8rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;

          .right {
            display: flex;
            flex-direction: column;
            margin-left: 30rpx;

            span:nth-child(1) {
              font-weight: 700;
              font-size: 33rpx;
            }

            span:nth-child(2) {
              color: #88919d;
            }
          }

          &>image {
            width: 54rpx;
            height: 54rpx;
          }
        }
      }

      .mainC_1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx #efefef solid;

        padding: 34rpx 26rpx;

        .lxxz {
          width: 50%;
          font-weight: 700;
          font-size: 32rpx;
        }
      }

      .mainC_2 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1rpx #efefef solid;
        font-size: 30rpx;
        padding: 20rpx;

        .icon {
          width: 64rpx;
          height: 64rpx;
          background: url("https://i.ringzle.com/file/20240111/56911b6385f64bbb8429521c06334f55.png");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .input {
          width: 40%;
          height: 45rpx;
          font-size: 32rpx;

          font-weight: Regular;

          line-height: 45rpx;
        }
      }

      .mainC_3 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx #efefef solid;

        .city_selected {
          background: #f7f7f7;
          border-radius: 6px;
          padding: 10rpx 16rpx;
          margin-right: 20rpx;
          color: #01b9f9;
          font-size: 24rpx;
          font-weight: Regular;
        }

        .city {
          background: #f7f7f7;
          border-radius: 6px;
          padding: 10rpx 16rpx;
          margin-right: 20rpx;
          color: #666666;
          font-size: 24rpx;
          font-weight: Regular;
        }
      }

      .mainC_4 {
        font-weight: 700;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx #efefef solid;

        font-size: 30rpx;

        .span1 {
          color: #b5b5b5;
          font-size: 30rpx;
          text-align: left;
          font-weight: 300;
          margin-left: 20rpx;
        }
      }

      .mainC_5 {
        padding: 30rpx 20rpx;

        .btn {
          background: url("https://i.ringzle.com/file/20240111/3a37b69d0b8e44f8b5a685d18b1cc785.png");
          background-repeat: no-repeat;
          background-size: contain;
          height: 93rpx;
          width: 100%;
          display: block;
        }
      }

      .mainC_tabbar {
        display: flex;
        flex-direction: row;
        height: 120rpx;
        line-height: 120rpx;
        font-size: 32px;
        color: #666666;
        background: url("https://i.ringzle.com/file/20240111/73e8785ad2e24a31b73644d958ca6c87.png") repeat center;
        border-radius: 16rpx;
        font-size: 18px;
        position: relative;

        .title {
          width: 50%;
          text-align: center;
        }

        .title_selected {
          width: 50%;
          text-align: center;
          font-weight: 700;
          color: #000000;
        }

        .title1 {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 20rpx;
        }
      }

      .mainC_tabbar_selected {}
    }
  }

  .question {
    // margin-top: 30rpx;
    margin: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;

    .title {
      padding: 20rpx;
      font-size: 32rpx;
      font-weight: 700;
    }
  }

  .bottom {
    position: relative;
    margin-top: 48rpx;

    .tabbar {
      display: flex;
      justify-content: space-evenly;
      color: #6d6d6d;
      font-size: 31rpx;
      align-items: flex-start;

      .tabar1 {
        width: 163rpx;
        height: 69rpx;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .tabar2 {
        background: url("https://i.ringzle.com/file/20240111/1a974b9f72574570bc24e20ffe0ce681.png") repeat center;
        width: 163rpx;
        height: 69rpx;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .tabar3 {
        background: url("https://i.ringzle.com/file/20240111/c881d86123584544aad5ec9d39ea028e.png") repeat center;
        width: 163rpx;
        height: 69rpx;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .tabar4 {}
    }

    .showPic {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 20rpx;

      .cl_card {
        margin-top: 16rpx;
        background: #ffffff;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
        border-radius: 16rpx;
        position: relative;
        width: 48%;

        &>image {
          width: 100%;
          height: 280rpx;
          border-radius: 16rpx;
        }

        .clc_info {
          width: 100%;
          padding: 20rpx 20rpx 24rpx;
          box-sizing: border-box;

          .clci_name {
            font-size: 28rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #333333;
            line-height: 40rpx;
          }

          .clci_price {
            margin-top: 16rpx;
            display: flex;
            align-items: flex-end;

            .cp_s1 {
              font-size: 28rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              color: #ff4141;
            }

            text {
              font-size: 36rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              color: #ff4141;
            }

            .cp_s2 {
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #abb0b5;
            }
          }
        }

        .clc_type {
          width: 72rpx;
          height: 36rpx;
          background: rgba(24, 24, 24, 0.5);
          border-radius: 16rpx 0rpx 24rpx 0rpx;
          line-height: 36rpx;
          text-align: center;
          font-size: 22rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
}
</style>